<template>
	<view style="height:  750rpx; position: relative;">
		<l-f2 ref="chart"></l-f2>
		<cover-view style="position: absolute;top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0);text-align:center; z-index: 10">
			<cover-view style="font-size: 12px;color: #999;margin: 0">{{type}}</cover-view>
			<cover-view style="font-size: 18px;color: #343434;margin: 0;font-weight: bold;">{{money}}</cover-view>
		</cover-view>	
	</view>
</template>

<script>
	import F2 from '@/uni_modules/lime-f2/components/l-f2/f2-all.min.js';
	export default {
		data() {
			return {
				type: '',
				money: '',
				data : [{
					const: 'const',
					type: '交通出行',
					money: 51.39
					}, {
					const: 'const',
					type: '饮食',
					money: 356.68
					}, {
					const: 'const',
					type: '生活日用',
					money: 20.00
					}, {
					const: 'const',
					type: '住房缴费',
					money: 116.53
				}]
			}
		},
		mounted() {
			this.$refs.chart.init(config => {
				const chart = new F2.Chart(config);
				chart.source(this.data);
				chart.coord('polar', {
				transposed: true,
				radius: 0.5,
				innerRadius: 0.5
				});
				chart.axis(false);
				chart.legend(false);
				chart.tooltip(false);
				
				chart.interval()
				.position('const*money')
				.adjust('stack')
				.color('type', [ '#1890FF', '#13C2C2', '#2FC25B', '#FACC14' ]);
				chart.pieLabel({
				sidePadding: 20,
				activeShape: true,
				label1: function label1(data) {
					return {
					text: '￥' + data.money,
					fill: '#343434',
					fontWeight: 'bold'
					};
				},
				label2: function label2(data) {
					return {
					text: data.type,
					fill: '#999'
					};
				},
				onClick: (ev) => {
					const data = ev.data;
					if (data) {
						this.type = data.type
						this.money = data.money
					}
				}
				});
				chart.render();
				return chart;
			});
		}
	}
</script>